<template>
  <!-- 面试技巧 -->
  <div class="articles">
    <div class="app-container">
      <el-card>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form label-width="80px" :inline="true" ref="articlesFormRef">
              <el-form-item label="关键字">
                <el-input
                  v-model="queryList.keyword"
                  style="width: 200px"
                  size="small"
                  clearable
                  @clear="localArticleList"
                  placeholder="根据文章标题搜索"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select
                  placeholder="请选择"
                  size="small"
                  v-model="queryList.state"
                >
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-button size="small" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="localArticleList"
                >搜索</el-button
              >
            </el-form>
          </el-col>
          <el-col :span="2" :offset="5">
            <el-button
              type="success"
              icon="el-icon-edit"
              class="addarticles"
              size="small"
              @click="isSkillsClose"
              >新增技巧</el-button
            >
          </el-col>
        </el-row>
        <!-- 警示框 -->
        <el-alert
          :title="totalAll"
          type="info"
          class="caution"
          :closable="false"
          show-icon
        >
        </el-alert>
        <!-- table表格 -->
        <el-table stripe :data="list" class="table" x>
          <el-table-column type="index" align="center" width="80" label="序号">
          </el-table-column>
          <el-table-column width="400" label="文章标题" property="title">
            <!-- 视频 -->
            <template slot-scope="{ row }">
              <!-- {{ row }} -->
              {{ row.title }}
              <i
                class="el-icon-film"
                v-show="row.videoURL !== ''"
                @click="VideoShow(row)"
              ></i>
              <!-- 视频弹出框 -->
            </template>
            <!-- /视频 -->
          </el-table-column>
          <el-table-column label="阅读数" property="visits"> </el-table-column>
          <el-table-column label="录入人" property="visits"> </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="{ row }">
              <span>{{
                row.createTime | parseTimeByString('{y}-{m}-{d} {h}:{mm}:{s}')
              }}</span>
            </template>
          </el-table-column>
          <!-- 1表示已启用 0 表示已禁止-->
          <el-table-column width="100" label="状态">
            <template slot-scope="{ row }">
              <span>{{ row.state === 1 ? '已启用' : '已禁用' }}</span>
            </template>
          </el-table-column>
          <el-table-column width="180" label="操作">
            <template slot-scope="{ row }">
              <!-- {{row}} -->
              <el-link
                type="primary"
                @click="previewClick(row.id)"
                class="link"
                :underline="false"
                >预览</el-link
              >
              <!-- 判断state的状态 调用接口 -->
              <el-link
                type="primary"
                @click="cutItem(row)"
                class="link"
                :underline="false"
              >
                {{ row.state === 1 ? '禁用' : '启用' }}
              </el-link>
              <el-link
                class="link"
                :underline="false"
                :type="row.state === 1 ? 'info ' : 'primary'"
                :disabled="row.state === 1 ? true : false"
                @click="isAmendClose(row.id)"
              >
                修改</el-link
              >
              <el-link
                class="link"
                :type="row.state === 1 ? 'info ' : 'primary'"
                :disabled="row.state === 1 ? true : false"
                :underline="false"
                @click="deleteList(row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <PageTool
            :paginationPage="queryList.page"
            :paginationPagesize="queryList.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>

        <!-- 新增技巧的弹框 -->
        <articles-add
          ref="listRef"
          :isaddSkillsClose.sync="isaddSkillsClose"
          :articleId.sync="articleId"
          @updateList="updateList"
        >
        </articles-add>

        <!-- 预览的弹框 -->
        <articles-preview
          ref="previewRef"
          :articleId.sync="articleId"
          :previewClose.sync="previewClose"
        >
        </articles-preview>
      </el-card>
    </div>
    <!-- 视频 -->
    <div class="video">
      <video :src="url" controls="controls" autoplay></video>
      <!-- 视频关闭 -->
      <el-button
        type="info"
        class="el-icon-close videoClose"
        @click="videoClose"
        circle
        size="big"
      ></el-button>
      <!-- /视频关闭 -->
    </div>
  </div>
</template>

<script>
import { articlesList, changeState, deleteItem } from '@/api/hmmm/articles'
// 导入分页
import PageTool from '@/module-manage/components/page-tool'
// 添加编辑的弹框
import ArticlesAdd from '../components/articles-add'

// 预览的弹框
import ArticlesPreview from '../components/articles-preview'
export default {
  name: 'articles',
  components: {
    PageTool,
    ArticlesPreview,
    ArticlesAdd
  },
  props: {},
  data() {
    return {
      url: '',
      dialogVisible: false,
      queryList: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      cateRules: {
        title: [
          { required: true, message: '标题名称不能为空', trigger: 'blur' }
        ]
      },
      list: [],
      total: 0,
      totalAll: '',
      isaddSkillsClose: false,
      // 添加技巧的表单
      addForm: {
        title: '',
        articleBody: '', // 文章正文
        videoURL: '' // 视频地址
      },
      // 富文本的配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [
              'blockquote',
              'code-block',
              'image',
              'video',
              'direction',
              { list: 'ordered' },
              { list: 'bullet' },
              { script: 'super' },
              { indent: '+1' }
            ]
          ]
        }
      },
      //
      articleId: null,
      previewClose: false,
      // 文章编辑的内容
      atricleContent: {}
    }
  },
  computed: {},
  watch: {},
  methods: {
    async localArticleList() {
      try {
        const res = await articlesList(this.queryList)

        this.list = res.data.items
        // console.log(this.list)
        this.total = res.data.counts
        this.totalAll = `数据一共${this.total}条`
        // this.$message.success('获取文章成功')
      } catch (error) {
        // this.$message.error('获取文章失败')
      }
    },
    // 清除的事件
    clear() {
      this.queryList = {}
      this.localArticleList()
    },
    // 子组件的传值
    updateList() {
      // 关闭弹窗
      this.isaddSkillsClose = false
      // 初始化代码
      this.localArticleList()
      this.articleId = null
    },
    // 修改事件
    isAmendClose(ids) {
      this.articleId = ids
      this.$refs.listRef.getEditId(ids)
      this.isaddSkillsClose = true
    },
    //
    isSkillsClose() {
      this.isaddSkillsClose = true
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.queryList.pagesize = val
      if (this.queryList.page === 1) {
        this.localArticleList(this.queryList)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.queryList.page = val
      this.localArticleList()
    },
    // 预览事件
    previewClick(ids) {
      // 获取 id
      this.articleId = ids
      //
      this.$refs.previewRef.getEditId(ids)
      this.previewClose = true
    },
    // 状态的转换
    async cutItem(row) {
      // 启用就让他禁用
      if (row.state === 1) {
        const state = 0
        await changeState({ id: row.id, state })
        // console.log(res)
      } else {
        const state = 1
        await changeState({ id: row.id, state })
        // console.log(res)
      }
      this.localArticleList()
    },
    // 删除
    async deleteList(i) {
      try {
        await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示')
        const res = await deleteItem({ id: i })

        if (res.status === 200) {
          this.$message.success('删除成功')
          this.localArticleList()
        } else {
          this.$message.error('删除成功')
        }
      } catch (error) {
        this.$message.info('取消删除')
      }
    },
    // 视频结束
    videoClose() {
      const video = document.querySelector('.video')
      video.style.display = 'none'
      this.url = ''
    },
    // 视频开始
    VideoShow(row) {
      this.url = row.videoURL
      const video = document.querySelector('.video')
      video.style.display = 'block'
    }
  },
  created() {
    this.localArticleList()
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.articles {
  .app-container {
    padding: 10px;
    .pagination {
      margin-top: 20px;
    }
  }
  .table {
    .link {
      margin-right: 8px;
    }
  }
  .el-icon-film {
    color: blue;
    font-size: 18px;
  }
  .video {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    z-index: 999999999;
    video {
      display: block;
      position: fixed;
      width: 1200px;
      height: 650px;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
    }
    .videoClose {
      position: fixed;
      top: 5%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
